<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Big Network Graph</h1>
    <div id="container"></div>
    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
      const NUM_NODES = 100000;

      let model = {
        nodes: [],
        edges: []
      }

      for (let n=0; n<NUM_NODES; n++) {
        model.nodes[n] = {
          x: Math.random() * 2 - 1, // between -1 and 1,
          y: Math.random() * 2 - 1, // between -1 and 1,
          group: Math.floor(Math.random() * 3)
        }; 

        if (n<NUM_NODES-1) {
          model.edges[n] = {
            from: n,
            to: n+1
          }
        }
      }

      let graph = new ElGrapho({
        container: document.getElementById('container'),
        model: model,
        width: 1000,
        height: 500,
        nodeSize: 0.005,
        debug: true
      });

    </script>
  </body>
</html>